<!-- 关注 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>首页</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />
	<link rel="stylesheet" href="../plugin/swiper5/css/swiper.min.css">
	<style>
		body {
			background-color: #F5F5F5;
		}

		.content{
			position: relative;
		}
		/* 头部 */

		.head {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 200;
		}

		.hd_bar {
			display: flex;
			align-items: center;
			background-color: #ff502d;
			padding: 0.10rem 0;
		}

		.xiaoxi {
			position: relative;
			color: #fff;
			font-size: 0.42rem;
			margin: 0.23rem 0.34rem;
		}

		.corner {
			position: absolute;
			right: -0.10rem;
			top: -0.10rem;
			min-width: 0.28rem;
			height: 0.28rem;
			line-height: 0.35rem;
			text-align: center;
			font-size: 0.20rem;
			color: #fff;
			border-radius: 50%;
			background: #ff8732;
			padding: 0.03rem;
		}

		.saoyisao {
			color: #fff;
			font-size: 0.40rem;
			margin: 0.24rem 0.35rem;
		}

		.search {
			display: flex;
			align-items: center;
			width: 5.30rem;
			height: 0.60rem;
			background-color: #fff;
			border-radius: 0.30rem;
		}

		.search_text {
			flex: auto;
			font-size: 0.28rem;
			color: #e5e5e5;
		}

		.search_icon {
			height: 0.38rem;
			width: 0.38rem;
			line-height: 0.38rem;
			font-size: 0.38rem;
			color: #eee;
			margin: 0 0.20rem;
		}
		/* 轮播图 */

		.swiper-wrap {
			position: relative;
			height: 2.90rem;
			background-color: #fff;
			margin-top: 57px;
		}

		.swiper-bg {
			height: 1.28rem;
			background: linear-gradient(0deg, rgba(253, 27, 66, 1) 0%, rgba(255, 80, 45, 1) 100%);
		}

		.swiper {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 2.90rem;
		}

		.container1 {
			width: 100%;
			height: 3.2rem;
		}

		.slide1 {
			height: 3.2rem;
		}

		.swiper-pagination-bullet {
			height: 0.12rem !important;
			width: 0.12rem !important;
		}

		.swiper-pagination-bullet-active {
			background-color: #ff502d
		}

		.image {
			width: 6.90rem;
			height: 2.70rem;
			border-radius: 0.20rem;
			margin: 0 auto;
		}
		/* 菜单导航 */

		.navbar {
			display: flex;
			height: 2.15rem;
			align-items: center;
			background: #fff;
		}

		.nav_item {
			height: 2.15rem;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.nav_text {
			margin-top: 0.19rem;
			font-size: 0.26rem;
			color: #333;
		}

		.nav_icon {
			font-size: 0.70rem;
		}
		/* 商城展示 */

		.shop {
			background: #f5f5f5;
		}

		.gonggao {
			display: flex;
			align-items: center;
			height: 0.70rem;
			margin: 0.20rem 0.30rem;
			white-space: nowrap;
			background: #fff;
			border-radius: 0.10rem;
		}

		.gg_title {
			font-size: 0.28rem;
			color: #fc4f26;
			font-weight: 800;
			margin-left: 0.19rem;
		}

		.swiper2 {
			flex: auto;
		}

		.container2 {
			width: 5.6rem;
		}

		.gg_content {
			font-size: 0.28rem;
			color: #666;
			margin-left: 0.21rem;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.rem_title {
			height: 0.34rem;
			line-height: 0.34rem;
			margin: 0.27rem 0 0 0.30rem;
			font-size: 0.34rem;
			font-weight: bold;
			color: #333;
		}

		.scroll {
			margin: 0.30rem 0 0 0.30rem;
		}

		.scroll-view {
			overflow-x: auto;
			white-space: nowrap;
			overflow-y: hidden;
		}

		.presell_recommend {
			padding-top: 0.20rem;
		}

		.presell_list {
			display: inline-block;
			margin-right: 0.20rem;
			width: 1.90rem;
			background: #fff;
			border-radius: 0.10rem;
		}

		.presell_img {
			height: 1.90rem;
			width: 1.90rem;
			border-radius: 0.10rem;
		}

		.presell_text {
			font-size: 0.28rem;
			color: #666;
			font-weight: 400;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.product_recommend {
			margin-top: 0.60rem;
		}

		.product_bar,
		.information_bar {
			height: 0.40rem;
			display: flex;
			margin: 0 0.30rem;
		}

		.pro_title,
		.ifm_title {
			height: 0.40rem;
			line-height: 0.40rem;
			flex: auto;
			font-size: 0.34rem;
			font-weight: bold;
			color: #333;
		}

		.pro_right,
		.ifm_right {
			display: flex;
			align-items: center;
		}

		.pro_content,
		.ifm_content {
			font-size: 0.28rem;
			color: #999;
			line-height: 0.30rem;
			margin-right: 0.05rem;
		}

		.pro_icon,
		.ifm_icon {
			font-size: 0.20rem;
			color: #999;
		}

		.product {
			margin-top: 0.29rem;
			font-size: 0;
			padding-left: 0.23rem;
		}

		.product_list {
			display: inline-block;
			height: 3.38rem;
			padding: 0 0.07rem;
			margin-bottom: 0.13rem;
		}

		.product_img {
			width: 3.38rem;
			height: 3.38rem;
			border-radius: 0.10rem;
		}
		/* 资讯中心 */

		.information {
			background-color: #f5f5f5;
			padding-top: 0.60rem;
		}

		.information_box {
			width: 6.90rem;
			margin: 0 auto;
			margin-bottom: 0.20rem;
		}

		.ifma_item {
			width: 6.90rem;
			height: 2.0rem;
			display: inline-flex;
			align-items: center;
			background-color: #fff;
			border-radius: 0.10rem;
		}

		.ifma_left {
			position: relative;
			width: 3.01rem;
			height: 1.40rem;
			margin-left: 0.21rem;
		}

		.ifma_text {
			width: 3.01rem;
			height: 0.76rem;
			font-size: 0.30rem;
			line-height: 0.38rem;
			color: #333;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.ifma_l_bottom {
			position: absolute;
			left: 0;
			bottom: 0;
		}

		.ifma_l_bottom span {
			font-size: 0.24rem;
			color: #999;
			margin-right: 0.80rem;
		}

		.ifma_right {
			flex: auto;
			text-align: right;
			height: 1.40rem;
			margin-right: 0.30rem;
		}

		.ifma_img {
			display: inline-block;
			width: 2.81rem;
			height: 1.40rem;
			border-radius: 0.10rem;
		}

		.goTop{
		 position: fixed;
	   bottom: 0.40rem;
	   right: 0.20rem;
	   background: rgba(0, 0, 0, 0.1);
	   border-radius: 50%;
	   overflow: hidden;
	   z-index: 500;
		}

    .goTop-Warp{
			display: flex;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  width: 0.80rem;
		  height: 0.80rem;
		  font-size: 0.24rem;
		  color: #fff;
    }
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<!-- 头部 -->
		<div class="head">
			<div class="hd_bar">
				<div class="iconfont iconxiaoxi1 xiaoxi" @click="getNotice">
					<div v-if="count<100">
						<div v-if="count!=0">
							<div class="corner">{{count}}</div>
						</div>
						<div v-else></div>
					</div>
					<div v-else-if="count>=100">
						<div class="corner">99+</div>
					</div>
				</div>
				<div class="search" @click="commodity_search">
					<div class="iconfont iconsousuo search_icon"></div>
					<div class="search_text">输入相关商品名称来进行搜索</div>
				</div>
				<div class="iconfont iconsaoyisao saoyisao" @click="openScanner"></div>
			</div>
		</div>
		<!-- 轮播图 -->
		<div class="swiper-wrap">
			<div class="swiper-bg"></div>
			<div class="swiper">
				<div class="swiper-container container1">
					<div class="swiper-wrapper">
						<div class="swiper-slide slide1" v-for="(item,index) in banner" :key="index">
							<img class="image" :src="item.img+'?imageView2/1/w/690/h/290'" />
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
		<!-- 菜单导航 -->
		<div class="navbar">
			<div class="nav_item" @click="Jump('presell','')">
				<div class="iconfont iconyushou nav_icon" style="color: #2874FF;"></div>
				<span class="nav_text">预售商品</span>
			</div>
			<div class="nav_item" @click="Jump('message','')">
				<div class="iconfont iconzuixinzixun nav_icon" style="color: #FB695B;"></div>
				<span class="nav_text">最新资讯</span>
			</div>
			<div class="nav_item" @click="Jump('jifen','')">
				<div class="iconfont iconjifenduihuan nav_icon" style="color: #FF8732;"></div>
				<span class="nav_text">积分兑换</span>
			</div>
			<div class="nav_item" @click="Jump('gonggao','')">
				<div class="iconfont icongonggao nav_icon" style="color: #66D493;"></div>
				<span class="nav_text">商城公告</span>
			</div>
		</div>

		<!-- 商城展示 -->
		<div class="shop">
			<div class="gonggao">
				<span class="gg_title">商城公告</span>
				<div class="swiper2">
					<div class="swiper-container container2">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="(item,index) in shopPlacard" :key="index">
								<div class="gg_content" @click="Jump('gonggaoDetail',item.id)">{{item.title}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="presell_recommend">
				<div class="rem_title">预售推荐</div>
				<div class="scroll">
					<div class="scroll-view">
						<div class="presell_list" v-for="(item,index) in Product1" :key="index" @click="ProductDetail(item.id)">
							<img class="presell_img" :src="item.image_center+'?imageView2/1/w/95/h/95'" />
							<div class="presell_text">{{item.product_name}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="product_recommend">
				<div class="product_bar">
					<div class="pro_title">产品推荐</div>
					<div class="pro_right" @click="Jump('ordinary','')" data-evt="ordinary">
						<div class="pro_content">更多</div>
						<div class="iconfont iconxiayibu pro_icon"></div>
					</div>
				</div>
				<div class="product">
					<div id="product_list" class="product_list" v-for="(item,index) in Product2" :key="index" @click="ProductDetail(item.id)">
						<img class="product_img" :src="item.image_center+'?imageView2/1/w/170/h/170'"></img>
					</div>
				</div>
			</div>
		</div>

		<!-- 资讯中心 -->
		<div class="information">
			<div class="information_bar">
				<div class="ifm_title">资讯中心</div>
				<div class="ifm_right" @click="Jump('message','')">
					<div class="ifm_content">更多</div>
					<div class="iconfont iconxiayibu ifm_icon"></div>
				</div>
			</div>
			<div style="margin-top:0.3rem;">
				<div class="information_box" v-for="(item,index) in NoticeList" :key="index" @click="message_detail(item.id)" >
					<div class="ifma_item">
						<div class="ifma_left">
							<div class="ifma_text">{{item.title}}</div>
							<div class="ifma_l_bottom">
								<span v-if="item.comment_count>999">评论 999+</span>
								<span v-else>评论 {{item.comment_count}}</span>
								<span>{{item.create_time}}</span>
							</div>
						</div>
						<div class="ifma_right">
							<img class="ifma_img" :src="item.cover_img+'?imageView2/1/w/280/h/140'"></img>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 返回顶部 -->
		  <div class="goTop" style="display:none" @click="goTop">
				<div class="goTop-Warp">顶部</div>
		  </div>
	</div>

</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script src="../plugin/swiper5/js/swiper.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()

	})
	$(function () {
        $(window).scroll(function () {
						if($(window).scrollTop() > 500){
							 $(".goTop").fadeIn(300);
						}
						else {
							$(".goTop").fadeOut(300);
						}
        });
	  });

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				banner: [],
				Product1: [],
				Product2: [],
				NoticeList: [],
				shopPlacard: [],
				count: ''
			},
			mounted: function() {

				//alert(JSON.stringify(localdata.get("userinfo")));
				this.getIndexData()
				this.setCustomRefreshHeaderInfo()
				this.getNumber()
				var mySwiper = new Swiper('.container1', {
					speed: 300,
					initialSlide: 0,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
					autoplay: {
						delay: 3000,
						disableOnInteraction: false
					}, //可选选项，自动滑动
					pagination: {
						el: '.swiper-pagination'
					}, //实现底部小圆点
				})
				var mySwiper2 = new Swiper('.container2', {
					speed: 300,
					initialSlide: 0,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper
					autoplay: {
						delay: 5000,
						disableOnInteraction: false
					}, //可选选项，自动滑动
				})
			},
			methods: {
				//下拉刷新
				setCustomRefreshHeaderInfo: function() {
					api.setCustomRefreshHeaderInfo({
						bgColor: '#ff502d',
						tips: {
							pull: '下拉刷新',
							threshold: '松开立即刷新',
							load: '正在刷新'
						}
					}, function() {
						vm.getIndexData() //获取首页信息
						vm.getNumber() //更新未读消息
					});
				},

				//获取首页信息
				getIndexData: function() {
					AjaxSafe({
						url: "/xapp/index",
						loader: true,
						success: function(ret) {
							if (ret.state) {
								//console.log(res.data.indexNoticeList)
								var indexNoticeList = (ret.data.indexNoticeList.list || []).map(function(item) {
									item.create_time = item.create_time.substring(0, 10);
									return item;
								});
								vm.banner = ret.data.banner

								vm.Product1 = ret.data.preProduct

								vm.Product2 = ret.data.hotProduct

								vm.NoticeList = indexNoticeList

								vm.shopPlacard = ret.data.noticePlacardPage.list
							}
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					});
				},

				//获取未读条数信息
				getNumber: function() {
					if(localdata.get("userinfo") ){
						AjaxSafe({
							url: '/xapp/user/commentReply',
							data: {
								page: 1,
								size: 20
							},
							loader: false,
							success: function(ret){
								//alert(ret.count)
								vm.count = ret.count
							},
							failed: function(err) {
								alert("网络故障！");
							}
						})
					}
				},


				//打开消息
				getNotice: function() {
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
          api.openWin({
              name: 'give_notice',
              url: './give_notice.html',
              pageParam: {
                  name: 'test'
              }
          });

				},

				//
				openScanner: function() {


				},

				//跳转对应页面
				Jump: function(type, id) {
					//alert(type);
					switch (type) {
						case "presell":
							open_menu(2)
							api.sendEvent({name: 'shopType',extra:2});
							break;
						case "message":
							open_menu(3)
							break;
						case "jifen":
							if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
								TS_UserLogin()
								return
							}
              api.openWin({name: 'coupon',url: './coupon.html',pageParam: {}});
							break;
						case "gonggao":
							api.openWin({name: 'shop_notice',url: './shop_notice.html',pageParam: {}});
							break;
						case "gonggaoDetail":
							api.openWin({name: 'shop_noticeDetail',url: './shop_noticeDetail.html',pageParam: {id: id}});
							break;
						case "ordinary":
							open_menu(2)
							api.sendEvent({name: 'shopType',extra:1});
							break;
					}
				},

				//打开商品详情页
				ProductDetail: function(id) {
					if( !localdata.get("userinfo") ){//未登录提示跳转登录界面
						TS_UserLogin()
						return
					}
         api.openWin({name: 'commodity_detail',url: './commodity_detail.html',pageParam: {}})
				 localdata.set('productId',id)
				},

	      //返回顶部
				goTop:function(){
					 $('body,html').animate({scrollTop: 0}, 100);
				}
			},
		})
	}
</script>

</html>
